<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>登录页面</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        body {
            background-color: #2e2e2e;
            color: white;
        }

        .row h1 {
            color: #ffc600;
        }

        .control-label {
            color: black;
        }

        #heading {
            background-color: black;
            color: #ffc600;
        }

        .panel-default {
            border-color: #ffc600;
        }

        input[type='checkbox'] {
            position: relative;
            top: 7px;
            left: -10px;
        }
    </style>
</head>
<body>
<!--登录页标题-->
<header>
    <div class="container">
        <div class="row">
            <div class="col-md-offset-2 col-md-8">
                <h1>
                    <small>欢迎使用</small> <b>VRD</b>作品展示系统
                </h1>
            </div>
        </div>
    </div>
</header>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <!--登录面板-->
            <div class="panel panel-default">
                <!--面板标题-->
                <div class="panel-heading" id="heading">
                    <h2 class="panel-title">发布作品</h2>
                </div>
                <!--面板主体-->
                <div class="panel-body">
                    <!--登录表单-->
                    <form style="color: black" id="myform" class="form-horizontal" role="form"
                          action="loginaction" enctype="multipart/form-data">
                        <!--标题-->
                        <div class="form-group">
                            <label for="title" class="col-md-2 control-label">标题</label>
                            <div class="col-md-8">
                                <input type="text"
                                       class="form-control" id="title" name="title"
                                       placeholder="请输入作品标题">
                            </div>
                        </div>

                        <!--作者-->
                        <div class="form-group">
                            <label for="author" class="col-md-2 control-label">作者</label>
                            <div class="col-md-8">
                                <input type="text"
                                       class="form-control" id="author" name="author"
                                       placeholder="请输入作品作者">
                            </div>
                        </div>

                        <!--简介-->
                        <div class="form-group">
                            <label for="intro" class="col-md-2 control-label">作品简介</label>
                            <div class="col-md-8">
                                <input type="text"
                                       class="form-control" id="intro" name="intro"
                                       placeholder="请输入作品简介">
                            </div>
                        </div>

                        <!--分类-->
                        <div class="form-group">
                            <label  class="col-md-2 control-label">作品分类</label>
                            <div class="col-md-8">
                                <select name="categoryId">
                                    <option v-for="c in c_arr" :value="c.id">{{c.name}}</option>
                                </select>
                                <
                            </div>
                        </div>

                        <!--上传-->
                        <div class="form-group">
                            <label class="col-md-2 control-label">选择文件</label>
                            <div class="col-md-8">
                                <input type="file" name="picFile">
                            </div>
                        </div>

                        <!--发布按钮-->
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="button" class="btn btn-default sublogin" @click="upload()">发布</button>
                                <span></span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<!--网页页脚-->
<footer>
    <div class="container">
        <div class="text-center">
            Copyright © 2018 Tedu.cn All Rights Reserved <br/>
            京ICP备16053980号-5 <a target="_blank" href="http://www.tedu.cn/">达内时代科技集团有限公司</a>
            版权所有
        </div>
    </div>
</footer>
</body>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let vm = new Vue({
        el:"form",
        data:{
            c_arr:[]
        },
        methods:{
            upload:function () {
            //准备form表单数据
                let data=new FormData(document.querySelector("form"));
                axios.post("/product/insert",data).then(function (response) {
                    if (response.data==1){
                        alert("发布完成!");
                        location.href="/";
                    }else {
                        alert("请先登录!");
                        location.href="/login.html";
                    }

                })
            }
        },
        created:function () {
            axios.get("/category/select").then(function (response) {
                vm.c_arr=response.data;
            })
        }
    })
    //取出Cookie里面保存的用户名和密码
    let cookies=document.cookie.split(";");
    //遍历所有Cookie
    for (let cookie of cookies){
        let arr=cookie.split("=");
        let name=arr[0];
        let value=arr[1];
        if (name.trim()=="username"){
            console.log("用户名="+value);
            vm.username=value;
        }
        if (name.trim()=="password"){
            console.log("密码="+value);
            vm.password=value;
        }
    }
</script>
</html>

















